<template>
	<div class="card-url-container">
		<span class="url-label">采集图片的URL链接:</span>
		<ul v-if="type && urls.length !== 0" class="url-container">
			<li v-for="item in urls" :key="item.url">
				<span class="label" v-show="type === 'ID-card'">{{ getLabel(item.position) + '：' }}</span>
				<span class="label" v-show="type === 'bank-card'">{{ '银行卡：' }}</span>
				<a class="url-value" v-html="item.url" :href="item.url" target="_blank"> </a>
			</li>
		</ul>
		<span v-else class="long-value">{{ '--' }}</span>
	</div>
</template>

<script>
export default {
	props: {
		type: {
			type: String,
			default: () => ''
		},
		urls: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {};
	},
	mounted() {
		console.log(this.urls);
	},
	methods: {
		getLabel(position) {
			if (position === 'front') return '身份证正面';
			return '身份证反面';
		}
	}
};
</script>

<style lang="less" scoped>
.card-url-container {
	.url-label {
		display: inline-block;
		line-height: 28px;
		width: 150px;
	}
}
.url-container {
	padding: 10px 10px 10px 20px;
}
</style>
